import React from 'react'
import QueueAnim from 'rc-queue-anim'
import PubSub from 'pubsub-js/src/pubsub'
import {message,Icon} from 'antd'
import config from './../libs/config.js'

import '../styles/today.scss'

export default class history extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            records: []
        }
    }

    componentDidMount() {
        var t = this;
        PubSub.publish('updateMenu','back-filter')
        PubSub.publish('updateTitle','今日牌谱')
        t.setState({
            objAccount: JSON.parse(window.localStorage['account'])
        },function() {
            var hide = message.loading('加载中...',0)
            $.ajax({
                url: config.server_host + '/api/todaymatch',
                type: 'get',
                data: {
                    user: t.state.objAccount.user,
                    platform: t.state.objAccount.platform
                },
                success: function(data) {
                    if (data.code === 200) {
                        t.setState({
                            records: data.data.reverse()
                        })
                        hide()
                    }
                }
            })
        })
    }

    handleDetail(taskId) {
        window.location.href = "#/grouplist?taskid=" + taskId
    }

    render() {
        var t = this;
        return (
            <QueueAnim
            type={['bottom', 'top']}
            ease={['easeOutQuart', 'easeInOutQuart']}>
                <div className="ani-box" key="a">
                    <div className="flex flex-1 pkl-today">
                        {
                            t.state.records.map(function(i){
                                return (
                                     <div className="line" onClick={t.handleDetail.bind(t,i.taskId)}>
                                        <Icon type="right" className="arrow"/>
                                        <span>牌局名称: {i.title}</span>
                                        <span>盲注: 5/10(5) 时长: 1小时</span>
                                        <span>创建人: {i.master} (俱乐部: {i.alliance})</span>
                                        <span>创建时间: {i.time}</span>
                                     </div>
                                )
                            })
                        }
                        {   
                            t.state.records.length === 0 ? (function(){
                                return (
                                    <div className="line">暂无数据</div>
                                )
                            })() :  (function(){
                                return (
                                    <div/>
                                )
                            })()
                        }
                    </div>
                </div>
            </QueueAnim>
        )
    }
}
